<template>
  <div
    id="container"
    style="height: 500px"
  />
</template>

<script setup lang="ts">
import { Table, type IColumn, type IBaseData } from '../lib'
import { onMounted } from 'vue'

const data: IBaseData[] = Array.from({ length: 20 }, (_, i) => ({
  id: i + 1,
  name: `用户${i + 1}`,
  age: Math.floor(Math.random() * 50) + 18,
  department: ['研发', '产品', '运营', '市场'][Math.floor(Math.random() * 4)]
}))


console.log('data', data)

// 列配置
const columns: IColumn[] = [
  { title: 'ID', dataIndex: 'id', width: 300 },
  { title: '姓名', dataIndex: 'name', width: 550 },
  { title: '年龄', dataIndex: 'age', width: 200 },
  {
    title: '部门',
    width: 100,
    dataIndex: 'department',
    render: (value) => {
      const colors = { 研发: '#f50', 产品: '#2db7f5', 运营: '#87d068', 市场: '#108ee9' }
      return `<span style="color: ${colors[value] || '#000'}">${value}</span>`
    }
  }
]

onMounted(() => {
  // 创建表格
  new Table({
    container: document.getElementById('container'),
    columns,
    dataSource: data
  })
})

</script>

<style scoped lang="less">
.container {
  width: 100%;
  height: 100%
}
</style>
